<template>
  <a-layout>
    <a-layout-content style="background-color: #F2F2E6; min-height: 900px">
      <div style="padding-top: 7vh; padding-bottom: 20px;">
<!--        标题-->
        <v-card-title class="text-center justify-center py-6" >
          <h1 class="font-weight-bold text-h2 basil--text">
            Solution Community
          </h1>
        </v-card-title>
<!--        副标题-->
        <v-card-subtitle class="text-center justify-center">
          <h2 class="font-weight-bold text-h3 basil--text">
            解决方案社区
          </h2>
        </v-card-subtitle>
<!--搜索框-->
        <div style="text-align: center; font-family: '华文楷体',sans-serif; font-weight: bold; margin-bottom: 3vh">
          <a-input-search placeholder="可根据方案名称或用户名进行检索"
                          style="width: 1000px"
                          enter-button="搜索"
                          size="large"
                          v-model="words"
                          @search="loadSolutions_search" /></div>
        <v-card color="basil" flat>
          <!--        工具栏-->
          <v-toolbar class="elevation-0" color="transparent" dense>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-toolbar-title class="ZZGF-font-bold">为您推荐{{total}}条解决方案</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn-toggle
              class="ZZGF-font-bold"
              v-model="sortType"
              tile
              @change="loadSolutions_search"
              color="main_1"
              group
            >
              <v-btn value="1" class="ZZGF-font-bold">
                <b>热门</b>
              </v-btn>
              <v-btn value="2" class="ZZGF-font-bold">
                <b>最新</b>
              </v-btn>
              <v-btn value="3" class="ZZGF-font-bold">
                <b>收藏最多</b>
              </v-btn>
            </v-btn-toggle>
          </v-toolbar>
          <v-card-text>
            <a-spin tip="Loading..." :spinning="searchLoading">
              <a-list item-layout="vertical" size="large" :data-source="solutionData" :split="false">
                <div slot="footer"><b>MindFall</b> Solution Community —— 解决方案社区</div>
                <!--              搜索结果-->
                <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                  <v-card rounded="xl" color="#FEFFF7" class="elevation-0">
                    <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                      <!--                    方案名 评分-->
                      <v-row style="padding-left: 1vw">
                        <!--                      方案名-->
                        <a class="font-weight-bold text-sm-h6 " @click="visit(item)">{{item.name}}</a>
                        <v-spacer></v-spacer>
                        <!--                      评分-->
                        <v-rating
                          v-if="item.score !== null"
                          v-model="item.score"
                          background-color="main_1"
                          color="main_1"
                          dense
                          readonly
                          half-increments
                          hover
                          style="padding-right: 1vw"
                          size="25"
                        ></v-rating>
                        <span v-if="item.score !== null" class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 2vw">({{ item.score.toFixed(2) }})</span>
                        <span v-else class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 2vw">暂无评分</span>

                      </v-row>
                      <!--                    作者头像 作者昵称-->
                      <v-row>
                        <v-col style="padding-top: 6px">
                          <a-avatar :src="item.userDTO.profilepic" style="cursor: pointer" @click="visitUser(item.userDTO.id)"/>
                          <span style="margin-left: 1vw; font-family: '微软雅黑 Light',serif; font-weight: bold; font-size: 15px; cursor: pointer" @click="visitUser(item.userDTO.id)">{{item.userDTO.nickname}}</span>
                        </v-col>
                      </v-row>
                      <!--                    方案详情-->
                      <v-row style="padding-left: 1vw; padding-right: 2vw">
                        <p>{{item.detail}}</p>
                      </v-row>
                      <!--                    方案统计信息 日期-->
                      <v-row>
                        <v-col>
                          <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                          <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                          <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                        </v-col>
                        <v-col>
                          <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                            <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                          </v-row>
                        </v-col>
                      </v-row>
                    </v-card-text>
                  </v-card>

                </a-list-item>
              </a-list>
            </a-spin>
          </v-card-text>
          <div style="margin-top: 10px; margin-bottom: 50px; text-align: center">
            <a-pagination
              v-if="solutionData.length !== 0"
              @change="handleCurrentChange"
              :current="pageNum"
              :page-size="pageSize"
              :total="total">
            </a-pagination>
          </div>
        </v-card>
      </div>

    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";

  export default {
    name: "Solution_Community",
    created() {
      // this.$store.commit('SET_KEEP_ALIVE', ['Solution_Community'])
      this.loadSolutions_search()
    },
    activated() {

    },
    computed:{

    },
    data () {
      return {
        searchLoading: false, //加载
        solutionData: [],  //列表显示数据
        sortType: '1', //排序方式
        words: '', //搜索关键词
        search_words: '', //翻页搜索关键词
        pageNum: 1, //当前页码
        pageSize: 5, //页面大小
        total: 0, //搜索结果总数
        rating: 5,

      }
    },
    methods:{
      async loadSolutions_search(){
        this.pageNum = 1
        this.searchLoading = true
        this.search_words = this.words
        await request.get('/solution/findAllBySearch', {
          params:{
            words: this.words,
            PageNum: 1,
            PageSize: this.pageSize,
          }
        }).then(res => {
          if (res.code === '200'){
            this.searchLoading = false
            if (this.sortType === '1'){
              this.solutionData = res.data.view.list
              this.total = res.data.view.total
            }
            else if (this.sortType === '2'){
              this.solutionData = res.data.time.list
              this.total = res.data.time.total
            }
            else if (this.sortType === '3'){
              this.solutionData = res.data.collection.list
              this.total = res.data.collection.total
            }
            // console.log(this.solutionData)
          }
          else if(res.code === '600'){
            this.searchLoading = false
            this.solutionData = []
            this.total = 0
          }
        })
      },
      async loadSolutions_change(){
        this.searchLoading = true
        await request.get('/solution/findAllBySearch', {
          params:{
            words: this.search_words,
            PageNum: this.pageNum,
            PageSize: this.pageSize,
          }
        }).then(res => {
          if (res.code === '200'){
            this.searchLoading = false
            if (this.sortType === '1'){
              this.solutionData = res.data.view.list
              this.total = res.data.view.total
            }
            else if (this.sortType === '2'){
              this.solutionData = res.data.time.list
              this.total = res.data.time.total
            }
            else if (this.sortType === '3'){
              this.solutionData = res.data.collection.list
              this.total = res.data.collection.total
            }
            // console.log(this.solutionData)
          }
        })
      },
      handleCurrentChange(pageNum) {  // 改变当前页码触发
        this.pageNum = pageNum
        this.loadSolutions_change()
        this.$vuetify.goTo(0, {
          duration: 500,
          offset: -100,
          easing: 'easeInOutCubic',
        })
      },
      getDisplayData(data){
        if(data >= 10000) {
          return data = Math.floor(data/10000) + "万+"
        }
        else
          return data
      },
      visitUser(id){
        let routeUrl = this.$router.resolve({
          path: "/userInfo",
          query:{user: window.btoa(window.encodeURIComponent(id))}
        });
        window.open(routeUrl.href, '_blank')
      },
      visit(item){ //打开一个方案并跳转
        request.get('/solution', {
          params: {
            id: item.id
          }
        }).then(res =>{
          if (res.code === '200'){
            if(res.data.statement !== '已发布'){
              let notfoundUrl = this.$router.resolve({path: "/solution404"})
              window.open(notfoundUrl.href, '_blank')
            }
            else{
              request.post('/solution/updateView', {id: parseInt(item.id)}).then(res => {
                let routeUrl = this.$router.resolve({
                  path: "/solutionInfo",
                  query:{solution: window.btoa(window.encodeURIComponent(item.id))}
                });
                window.open(routeUrl.href, '_blank')
              })
            }
          }else {
            let notfoundUrl = this.$router.resolve({path: "/solution404"});
            window.open(notfoundUrl.href, '_blank')
          }
        })
      },


  }
  }
</script>

<style>
  .basil {
    background-color: #F2F2E6 !important;
  }
  .basil--text {
    color: #89B8CA !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  a:hover{
    color: #c1cbd7;
  }


</style>
